.teacher {
  @at-root {
    &-title {
      @include flexColCenter();
      margin-bottom: 10px;

      i {
        @include wh(28, 24);
        margin: 0 6px 0 7px;
        @include bg('~@/assets/images/icons/5_2_1js@2x.png');
      }

      span {
        font-size: 14px;
        color: rgba(35, 46, 58, 1);
      }
    }

    &-avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      margin-left: 7px;
      margin-right: 13px;
    }
    &-user {
      margin-bottom: 12px;
    }
    &-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    &-name {
      margin-bottom: 4px;
    }

    &-name,
    &-post {
      font-size: 14px;
      color: rgba(35, 46, 58, 1);
    }

    &-desc {
      margin-left: 7px;
      font-size: 14px;
      padding-right: 12px;
      color: rgba(102, 102, 102, 1);
      margin-bottom: 20px;
    }
  }
}

.course {
  @at-root {
    &-list {
      justify-content: space-between;
      &.hideLast {
        &::after {
          content: none;
        }
      }
      &:after {
        content: '';
        flex: auto;
      }
    }
    &-add {
      padding: 0 20px 12px;
      background: #fff;
      margin-top: 10px;
      &_file {
        display: flex;
        justify-content: space-between;
        height: 50px;
        cursor: pointer;
        &:hover {
          .file-name {
            color: #3280eaff;
          }
        }
        .file-name {
          font-size: 14px;
          margin-left: 16px;
          color: rgba(129, 136, 153, 1);
        }
      }
      &_container {
        .icons {
          display: flex;
          align-items: center;
          .ce-icon_delete {
            cursor: pointer;
            @include bg('~@/assets/images/icons/6_4_1asc@2x.png');
            &:hover {
              @include bg('~@/assets/images/icons/6_4_1ascs@2x.png');
            }
          }
          .ce-icon_modify {
            cursor: pointer;
            // @include bg('~@/assets/images/icons/6_4_1asc@2x.png');
            // &:hover {
            //   @include bg('~@/assets/images/icons/6_4_1ascs@2x.png');
            // }
          }
          .ce-icon {
            width: 24px;
            height: 24px;
            margin: 0;
            & + .ce-icon {
              margin-left: 10px;
            }
          }
        }
        .el-icon-arrow-up {
          transition: all 0.3s linear;
          transform: rotate(-180deg);
        }
        &.collapse {
          & > .course-add_header > .flex > .el-icon-arrow-up {
            transform: rotate(0deg) !important;
          }
        }
      }
      .level-0 {
        & > .course-add_header .title {
          font-size: 16px;
        }
      }
      .level-2 {
        padding-left: 56px;
      }
      &_line {
        height: 2px;
        margin-bottom: 32px;
        background: #d7dce1ff;
        width: 100%;
        padding: 0 20px;
        margin-left: -20px;
      }
      &_header {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .title {
          margin-left: 20px;
          font-size: 14px;
        }

        & > div > div.ce-button {
          min-width: 50px;
          height: 24px;
          line-height: 24px;
          font-size: 11px;
          border-style: dashed;
          .ce-icon {
            width: 9px;
            height: 9px;
            margin-right: 4px;
          }
        }
        .el-icon-arrow-up {
          cursor: pointer;
          margin-left: 10px;
        }
      }
    }
    &-input {
      &_desc {
        margin-top: 10px;
        height: 121px;
        box-sizing: border-box;
        padding: 17px 20px;
        background: rgba(255, 255, 255, 1);
        border-radius: 8px;
        display: flex;
        label {
          padding-top: 8px;
          font-size: 14px;
          color: rgba(77, 85, 93, 1);
        }
        textarea {
          resize: none;
          flex: 1;
          height: 87px;
          background: rgba(255, 255, 255, 1);
          border-radius: 8px;
          border: 1px solid rgba(215, 220, 225, 1);
          box-sizing: border-box;
          padding: 9px 12px;
          font-size: 14px;
          outline: none;
          color: rgba(77, 85, 93, 1);
          &::placeholder {
            color: #999999ff;
          }
        }
      }
    }

    &-desc {
      padding: 24px 56px 24px 30px;
      background: #fff;
      margin-top: 10px;
      position: relative;

      &.open {
        .course-desc_text {
          display: block !important;
        }

        i {
          transform: rotate(-180deg);
        }
      }

      i {
        cursor: pointer;
        position: absolute;
        top: 25px;
        right: 35px;
        font-size: 20px;
        transition: all 0.3s linear;
      }

      &_text {
        color: rgba(102, 102, 102, 1);
        font-size: 16px;
        @include multHide(1);

        strong {
          font-weight: 600;
          color: rgba(35, 46, 58, 1);
        }
      }
    }

    &-block {
      background: rgba(255, 255, 255, 1);
      border-radius: 8px;
      width: 100%;
      margin-top: 10px;

      &_tips {
        height: 43px;
        display: flex;
        justify-content: space-between;
        padding: 0 20px 0 30px;
        font-size: 14px;
        color: #666;
        line-height: 43px;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        margin-bottom: 22px;
        background: #addae9;
        .level {
          color: #333;
        }
        &.high {
          background: rgba(228, 126, 123, 0.22);

          .level {
            color: #e5605c;
          }
        }

        &.middle {
          background: #e0f0ff;

          .level {
            color: #2377ea;
          }
        }

        &.lower {
          background: rgba(77, 182, 142, 0.21);

          .level {
            color: #23a876;
          }
        }
      }
    }

    &-nodes {
      &.collapse {
        & > .course-node > .course-node_title > .el-icon-arrow-up {
          transform: rotate(0deg) !important;
        }
      }

      &.level-0 {
        padding-left: 54px;
        padding-right: 43px;

        & > .course-node > .course-node_title {
          font-size: 16px;

          i:not(.el-icon-arrow-up) {
            left: -24px;
            top: 50%;
            margin-top: -4px;
            width: 8px;
            height: 8px;
            background:linear-gradient(225deg,rgba(255,200,65,1) 0%,rgba(219,165,32,1) 100%);
            box-shadow:0px 2px 3px 0px rgba(243,188,54,0.39);
            border-radius: 8px;
          }

          .el-icon-arrow-up {
            right: -20px;
          }
        }
      }

      &.level-1 {
        padding-left: 35px;

        & > .course-node > .course-node_title {
          .el-icon-arrow-up {
            left: -28px;
            top: -1px;
          }
        }
      }

      &.level-2 {
        padding-left: 27px;

        & > .course-node > .course-node_title {
          .el-icon-arrow-up {
            left: -28px;
            top: -1px;
          }
        }
      }
    }

    &-node {
      &_tags {
        display: flex;
        margin-bottom: 16px;
      }

      &_tag {
        & + .course-node_tag {
          margin-left: 10px;
        }

        height: 22px;
        line-height: 22px;
        padding: 0 8px;
        border-left: 3px solid #ffc92d;
        border-radius: 2px;
        background: #f2f2f2;
        font-size: 11px;
        color: #333;

        // &.green {
        //   background: rgba(77, 182, 142, 0.1);
        //   color: rgba(77, 182, 142, 1);
        //   border-left-color: rgba(77, 182, 142, 1);
        // }
      }

      &_title {
        position: relative;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 12px;
        color: rgba(35, 46, 58, 1);

        i {
          position: absolute;
        }

        .el-icon-arrow-up {
          font-size: 20px;
          cursor: pointer;
          transition: all 0.3s linear;
          transform: rotate(-180deg);
        }
      }

      &_files {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
      }

      &_file {
        display: flex;
        justify-content: space-between;
        height: 50px;
        align-items: center;
        padding: 0 26px 0 16px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
        transition: all 0.3s linear;

        &:hover {
          color: #333333;
          background: linear-gradient(
            90deg,
            rgba(255, 200, 65, 1*.24) 0%,
            rgba(255, 200, 65, 0.29*.24) 100%
          );
        }

        .icon-play {
          @include wh(38, 40);
          @include bg('~@/assets/images/icons/5_2_1sp@2x.png');
          margin-right: 13px;
        }

        .icon-link {
          @include wh(40, 40);
          @include bg('~@/assets/images/icons/5_2_1wn@2x.png');
          margin-right: 13px;
        }
      }
    }
  }
}
